<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/5/23
  Time: 16:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/bootstrap3/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../node_modules/bootstrap3/dist/css/bootstrap.css">
    <style>
      .panel{
        height: 300px;
        width: 400px;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
      }
      .form-button{
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .form-label{
        display: inline-block; 
        line-height: 35px;
        width: 20%;
      }
      #inputUserName,#inputPassword{
        display: inline-block; 
        width: 80%;
      }
      .body-form{
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    </style>
</head>
<body>
    
    <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">教学管理</h3>
        </div>
        <div class="panel-body">
          
          <div>
            <legend class="text-center">登录</legend>
            <div class="loginfalse" style="display: none;">账号或密码输入错误</div>
            <div class="input-group" style="display: flex;">
              <label for="inputUserName" class="form-label text-center" >账号</label>
              <input type="text" class="form-control" id="inputUserName" placeholder="请输入账号(至少一为)" required=".{1,}" >
            </div>

            <div class="input-group" style="display: flex;">
              <label for="inputPassword" class="form-label text-center" >密码</label>
              <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码(至少6位)" required=".{6,}" >
            </div>
            <div class="form-button">
              <button type="button" class="btn btn-primary login">登录</button>
            </div>

          </div>

        </div>
    </div>


<script>
    $(".login").on("click", function (e) {
      var name=$("#inputUserName").val()
      var password=$("#inputPassword").val()
      $.ajax({
        type: "post",
        url: "/login",
        data: {
          name,
          password,
        },
        success: function (response) {
          if(response=='404')  $(".loginfalse").show();
          else{
              alert("登录成功");
              location.assign("/index");
          }
        }
      });
    });

</script>
</body>
</html>
